<template>
  <div>
      <div class="y-nav">
        <van-nav-bar title="塔吊设备" left-text="返回" left-arrow @click-left="onClickLeft">
            </van-nav-bar> 
      </div>
      <div class="l-bottem">
          <ve-line class="cavs" :data="chartData" :settings="chartSettings"></ve-line>
      </div>
        <div class="col-right">
            <div class="y-l-1">
                <p class="y-2-2">
                    设备编号&nbsp;:<span class="l-1">{{this.lshuju.tower_code}}</span>
                </p>
                <p class="y-2-2">
                  数据接收时间&nbsp;:<span class="l-1">{{this.lshuju.tower_receive}}</span>
                </p>    
                <p class="y-2-2">
                    塔身高度&nbsp;：<span class="l-1">{{this.lshuju.tower_height}}</span>
                </p>
                <p class="y-2-2">
                    垂直角度&nbsp;：<span class="l-1">{{this.lshuju.tower_vertical}}</span>
                </p>
                <p class="y-2-2">
                    小车幅度&nbsp;:<span class="l-1">{{this.lshuju.tower_range}}</span>
                </p>
                <p class="y-2-2">
                    水平斜角&nbsp;:<span class="l-1">{{this.lshuju.tower_mitre}}</span>
                </p>
                <p class="y-2-2">
                    吊钩高度&nbsp;:<span class="l-1">{{this.lshuju.tower_hook}}</span>
                </p>
                <p class="y-2-2">
                    后臂:&nbsp;<span class="l-1">{{this.lshuju.tower_afterwrap}}</span>
                </p>
                <p class="y-2-2">
                    吊重:&nbsp;<span class="l-1">{{this.lshuju.tower_hoisting}}</span>
                </p>
                <p class="y-2-2">
                    回转&nbsp;:<span class="l-1">{{this.lshuju.tower_turn}}</span>
                </p>
                <p class="y-2-2">
                      力矩比&nbsp;:<span class="l-1">{{this.lshuju.tower_torque}}</span>
                </p>
                <p class="y-2-2">
                    风速&nbsp;:<span class="l-1">{{this.lshuju.tower_wind}}</span>
                </p>
                <p class="y-2-2">
                    前臂&nbsp;:<span class="l-1">{{this.lshuju.tower_forearm}}</span>
                </p>
                <!-- <img class="y-img-3" src="static/img/fa38b50f43dfdbece92199c44286978.png" alt=""> -->
           </div>
        </div>
    </div>
</template>
<script>
import http from '../api';
export default {
  data() {
    this.chartSettings = {
      metrics: ['日期', '次数'],
      dimension: ['日期'],
    };
    return {
      char1: [],
      chartData: {
        columns: ['日期', '次数'],
        rows: [
          { 日期: '1月', 次数: 20 },
          { 日期: '2月', 次数: 30 },
          { 日期: '3月', 次数: 23 },
          { 日期: '4月', 次数: 22 },
          { 日期: '5月', 次数: 26 },
          { 日期: '6月', 次数: 35 },
          { 日期: '7月', 次数: 36 },
          { 日期: '8月', 次数: 36 },
          { 日期: '9月', 次数: 28 },
          { 日期: '10月', 次数:23 },
          { 日期: '11月', 次数: 20 },
          { 日期: '12月', 次数: 10 },
        ],
      },
      //数据
         // 数据：塔吊
    lshuju:{
    tower_height:"",//	塔身高度
    tower_vertical:"",//	垂直角度
    tower_torque:"",//力矩比
    tower_wind:"",//风速
    tower_forearm:"",//前臂
    tower_afterwrap:"",//后壁
    tower_hoisting:"",//吊重
    tower_turn:"",//回转
    tower_range:"",//小车幅度
    tower_mitre:"",//水平斜角
    tower_hook:"",//吊钩高度

      },
    };
  },
  methods:{
 
     onClickLeft() {
      this.$router.push({
          name: "主页",
        });
    },
   
  },
  mounted() {
    // 曲线图
    // http.huanjing1chart({}).then((res) => {
    //   this.chart1 = res;
    //   for (let i = 0; i < this.chartData.rows.length; i++) {
    //     this.chartData.rows[i].次数 = this.chart1[i];
    //   }
    //   console.log('环境表', res);
    // });
 http.TaDiaobiao1({}).then((res) => {
   console.log(res,'塔吊图表1')
      this.chart1=res;
      for (let i = 0; i <this.chartData.rows.length; i++) {
           this.chartData.rows[i].次数=this.chart1[i]
                }
      console.log("塔吊图表1", res);
    });
     //塔吊
      http.tower({}).then((r) => {
      this.lshuju=r.data[0]
      console.log("塔吊", this.lshuju);
     
    });
  },
};
</script>
<style scoped>
.y-nav{
        /* width: 38rem; */
        height: 5rem;
        background:#fff;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
.l-bottem {
  height: 35rem;
  /* background: indigo; */
}
.cavs{
    position: absolute;
    left: 0px;
    top: 0px!important;
}

/* 塔吊左侧 */
.col-left {
  width: 10rem;
  height: 23rem;
  position: relative;
  padding-top: 3rem;
}
/* 左侧塔吊图片 */
.y-img-1 {
  /* width: 5rem; */
  height: 20rem;
  position: absolute;
  right: 5rem;
    top: 1.8rem;
}
/* 塔吊图片 */
.y-img-2{
   /* width: 8rem; */
  height: 8rem;
 
}
.y-img-3{
  width: 8rem;
  height: 8rem;
  position: absolute;
  top: 8rem;
  right: 1rem;
}
/* 塔吊you侧 */
.col-right{
    /* width: 38rem; */
    height: 54rem;
    /* background: red; */
}
.y-l-1 {
  /* width: 20rem; */
  height: 30rem;
  float: left;
  padding-left: 1.3rem;
  position: relative;
  /* background: powderblue; */
}

.y-2-2{
   
  font-size: 1.5rem;

 
}
.l-1{
  /* font-size: 1.6rem; */
  padding-left: 2rem;
}



</style>